@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}


.page04{
    overflow: hidden;
    position:relative;
    .page04-border{
        img{
            @extend .position-margin;
//          top:220px;
            top:-100%;  
            left:-30px;
        }
        
    }
    .content-border{
        width:190px;
        height:190px;
        @extend .position-margin;
        top:220px;
        left:-30px;
        .page04-mother{
            @extend .position-margin;
            bottom:0;
//          left:-115px;
            left:-600%;
            top:7px;
        }
        .page04-mother-shadow{
            @extend .position-margin;
            bottom:-10px;
//          left:-80px;  
            left:-400%;                   
        }
        .page04-mother-son{
            @extend .position-margin;
            bottom:0px;
//          left:10px;                     
            left:-400%;
        }
        .page04-mother-son2{
            @extend .position-margin;
            bottom:20px;
            left:50px;   
            opacity: 0;                  
            
        }

        .page04-son-shadow{
            @extend .position-margin;
            bottom:-20px;
//          left:140px;
            left:-400%;
            
        }
        .page04-mother-speech01{
            @extend .position-margin;
//          top:-200px;
            top:-240%;
            left:-13px;
        }
        .page04-mother-speech02{
            @extend .position-margin;
            top:-10px;
//          left:-50px;
            left:-80px;
            transform: rotateZ(-20deg);
            opacity: 0;
        }
        .page04-mother-title{
            @extend .position-margin;
            width:250px;
            height:30px;
            background: #0D1744;
            color:white;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            top:220px;
    //      left:-90px;       
            left:-500%;
            opacity: 0;
     

        }
    }
}

.page04.active{
    .page04-border{
        img{
            animation:page04-border 400ms ease 400ms forwards;
            
        }
        
    }
    .content-border{

        .page04-mother{
            animation:page04-mother 600ms ease 800ms forwards;
        }
        .page04-mother-shadow{
            animation:page04-mother 600ms ease 800ms forwards;    
        }
        .page04-mother-son{
            animation:page04-mother-son 600ms ease 900ms forwards;       
        }
        .page04-mother-son2{
            animation:page04-mother-son2 800ms ease 1s forwards ;     
        }

        .page04-son-shadow{
            animation:page04-son-shadow 600ms ease 900ms forwards;
        }
        .page04-mother-speech01{
            animation:page04-mother-speech01 300ms ease 1.7s forwards;
        }
        .page04-mother-speech02{
            animation:page04-mother-speech02 600ms ease 900ms forwards;
        }
        .page04-mother-title{
            animation:page04-mother-title 600ms ease 2s forwards;
        }
    }
}

//border
@keyframes page04-border{
    0%{}
    33%{top:220px;}
    66%{top:200px;}
    100%{top:220px;}
}
//border

//mother
@keyframes page04-mother{
    0%{}
    33%{left:-95px}
    66%{left:-135px;}
    100%{left:-115px;}
}
//motehr

//mother-shadow
@keyframes page04-mother-shadow{
    0%{}
    33%{left:-60px}
    66%{left:-100px;}
    100%{left:-80px;}
}
//motehr-shadow

//son
@keyframes page04-mother-son{
    0%{}
    33%{left:30px}
    66%{left:0px;}
    100%{left:10px;}
}
//son
//son2
@keyframes page04-mother-son2{
    0%{}
    20%{left:70px;opacity: 1;}
    30%{left:40px;opacity: 1;}
    40%{left:50px;opacity: 1;}  
    99%{opacity: 1;} 
    100%{opacity: 1;}
}
//son2

//son-shadow
@keyframes page04-son-shadow{
    0%{}
    33%{left:160px}
    66%{left:120px;}
    100%{left:140px;}
}
//son-shadow

//speech01
@keyframes page04-mother-speech01{
    0%{}
    33%{top:-200px;}
    66%{top:-220px;}
    100%{top:-200px;}
}
//speech01


//speech02
@keyframes page04-mother-speech02{
    0%{}
    20%{left:-40px;top:-23px;opacity: 1;}
    40%{left:-55px;top:-18px;opacity: 1;}
    60%{left:-40px;top:-23px;opacity: 1;}
    80%{left:-55px;top:-18px;opacity: 1;}
    100%{left:-50px;top:-20px;opacity: 1;}
}
//speech02

//title
@keyframes page04-mother-title{
    0%{}
    33%{opacity:1;left:0px;}
    66%{opacity:1;left:-23px;}
    100%{
        opacity:1;left:-13px;
    }
}
//title